<template>
  <div class="userprofiles-container">
    <img src="@/assets/images/背景05.png" class="userprofiles-bgc" />
    <!-- 用户信息区域 -->
    <div class="songs-box" v-if="artistInfo.profile">
      <div class="songs-img"><img :src="artistInfo.profile.avatarUrl" /></div>
      <div class="songs-content">
        <div class="title">
          <div class="songs-title">
            <h1>{{ artistInfo.profile.nickname }}</h1>
          </div>
          <div class="user">
            <div class="vip-info">
              <span class="cvip" v-if="artistInfo.profile.vipType == 11"></span>
              <div class="desc" v-if="artistInfo.identify">
                <img :src="artistInfo.identify.imageUrl" />
                <span>{{ artistInfo.identify.imageDesc }}</span>
              </div>
              <span class="level">Lv{{ artistInfo.level }}</span>
              <span v-if="artistInfo.profile.gender == 1" class="el-icon-male"></span>
              <span v-if="artistInfo.profile.gender == 0" class="el-icon-female"></span>
            </div>
            <div class="btn-songs">
              <!-- @click="collection" -->
              <div class="down update" v-if="artistInfo.profile.userId == userInfo.userId">
                <i class="el-icon-edit"></i>
                <span>编辑个人信息</span>
              </div>
              <div class="star" v-if="artistInfo.profile.userId != userInfo.userId">
                <i class="el-icon-check" v-if="false"></i>
                <i class="el-icon-plus" v-else></i>
                <span v-if="artistInfo.profile.followed"> 已关注</span>
                <span v-else> 关注</span>
              </div>
              <div v-if="artistInfo.profile.artistId" class="down"
                @click="$router.push('/artists/' + artistInfo.profile.artistId)">
                <i class="el-icon-mic"></i>
                <span>歌手页面</span>
              </div>
              <div class="down" v-if="artistInfo.profile.userId != userInfo.userId">
                <i class="el-icon-message"></i>
                <span>发私信</span>
              </div>
            </div>
          </div>
        </div>

        <div class="songs-synopsis">
          <p>动态：{{ artistInfo.profile.eventCount }}</p>
          <p>关注：{{ artistInfo.profile.follows }}</p>
          <p>粉丝：{{ artistInfo.profile.followeds }}</p>
        </div>
        <p class="user-desc">
          个人简介：{{ artistInfo.profile.signature || "暂无介绍" }}
        </p>
      </div>
      <!-- 控制显示模式按钮盒子 -->
      <div class="change-modo-btns">
        <span @click="changeCardModo"
          :class="{ iconfont: 1, 'icon-dasuolvetuliebiao': 1, select: modo == 'card' }"></span>
        <span @click="changeListModo" :class="{ iconfont: 1, 'icon-shitu-liebiao': 1, select: modo == 'list' }"></span>
        <span @click="modo = 'detail'"
          :class="{ iconfont: 1, 'icon-relituliebiao': 1, select: modo == 'detail' }"></span>
      </div>
    </div>

    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!-- 专辑展示区域-------------------------------------------------------------------------- -->
      <el-tab-pane label="创建的歌单" name="first">
        <!-- 歌曲形式展示 -->
        <div v-show="modo == 'detail'" class="detail-modo">
          <div class="songs-info-box">
            <!-- 左侧大图片 -->
            <div class="songs-img">
              <img src="@/assets/images/听歌排行png.png" />
            </div>
            <!-- 右侧歌曲展示区域 -->
            <div class="songs-detail">
              <!-- title区域 -->
              <div class="songs-detail-title">
                <h1>听歌排行</h1>
                <span class="el-icon-video-play"></span>
                <span class="shu">|</span>
                <span class="el-icon-folder-add"></span>
              </div>
              <div class="songs-table">
                <!-- 展示排行榜表格区域  -->
                <el-table :data="hotSongs10" style="width: 100%" lazy size="mini" :show-header="false"
                  @row-dblclick="getSongInfo">
                  <el-table-column type="index" width="50" align="center"></el-table-column>
                  <el-table-column width="80">
                    <template slot-scope="{ row }">
                      <div class="control">
                        <span class="iconfont icon-xihuan" @click="addmyLove(row.song)"></span>
                        <span class="iconfont icon-xiazai" @click="download(row.song)"></span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column width="width" show-overflow-tooltip>
                    <template slot-scope="{ row }">
                      <div class="title-tags">
                        <span class="song-title">{{ row.song.name
                        }}<i v-if="row.song.alia.length > 0">({{ row.song.alia[0] }})</i></span>
                        <div class="tags">
                          <el-tag v-if="row.song.fee == 1" effect="plain" size="mini" class="vip-tag">VIP</el-tag>
                          <el-tag v-if="row.song.fee == 8" effect="plain" size="mini" class="sq-tag">SQ</el-tag>
                          <el-tag v-if="row.song.mv" effect="plain" size="mini" class="sq-tag"
                            @click="$router.push('/mv/' + row.song.mv)">MV<i class="el-icon-caret-right"></i></el-tag>
                          <i v-if="row.song.pc" class="el-icon-cloudy"></i>
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column width="80" align="center">
                    <template slot-scope="{ row }">
                      <span class="play-count">{{
                      row.playCount == 0 ? "" : row.playCount + "次"
                      }}</span>
                    </template>
                  </el-table-column>
                </el-table>
                <!-- 显示全部歌曲 -->
                <div v-if="hotSongs10.length == 10" class="show-all">
                  <span @click="checkAllSongs">查看全部{{ hotSongs.length }}首 ></span>
                </div>
              </div>
            </div>
          </div>
          <!-- 用户创建歌单展示区域 -->
          <div class="songs-info-box" v-for="item in albums" :key="item.id">
            <!-- 左侧大图片 -->
            <div class="songs-img">
              <div>
                <img :src="item.coverImgUrl" />
                <span class="create-time">{{ item.createTime | formatTime }}</span>
              </div>
            </div>
            <!-- 右侧歌曲展示区域 -->
            <div class="songs-detail">
              <!-- title区域 -->
              <div class="songs-detail-title">
                <h1 @click="$router.push('/playlists/' + item.id)">{{ item.name }}</h1>
                <span class="el-icon-video-play"></span>
                <span class="shu">|</span>
                <span class="el-icon-folder-add"></span>
              </div>
              <div class="songs-table">
                <!-- 展示歌曲表格区域 -->
                <el-table :data="item.songs" style="width: 100%" lazy size="mini" :show-header="false"
                  @row-dblclick="(row, col, e) => getSongInfo(row, col, e, item.id)">
                  <el-table-column type="index" width="50" align="center"></el-table-column>
                  <el-table-column width="80">
                    <template slot-scope="{ row }">
                      <div class="control">
                        <!--   -->
                        <span class="iconfont icon-xihuan" @click="addmyLove(row)"></span>
                        <span class="iconfont icon-xiazai" @click="download(row)"></span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column width="width" show-overflow-tooltip>
                    <template slot-scope="{ row }">
                      <div class="title-tags">
                        <span class="song-title">{{ row.name
                        }}<i v-if="row.alia.length > 0">({{ row.alia[0] }})</i></span>
                        <div class="tags">
                          <el-tag v-if="row.fee == 1" effect="plain" size="mini" class="vip-tag">VIP</el-tag>
                          <el-tag v-if="row.sq" effect="plain" size="mini" class="sq-tag">SQ</el-tag>
                          <el-tag v-if="row.mv" effect="plain" size="mini" class="sq-tag"
                            @click="$router.push('/mv/' + row.mv)">MV<i class="el-icon-caret-right"></i></el-tag>
                          <i v-if="row.pc" class="el-icon-cloudy"></i>
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="dt" width="80"></el-table-column>
                </el-table>
                <!-- 显示全部歌曲 -->
                <div v-if="item.songs && item.songs.length == 10" class="show-all">
                  <span @click="$router.push('/playlists/' + item.id)">查看全部{{ item.trackCount }}首 ></span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 歌曲形式展示 -->

        <!-- 卡片形式展示 -->
        <div v-if="modo == 'card'" class="card-modo">
          <div class="card-item" v-for="item in albums" :key="item.id">
            <div class="album-img">
              <img :src="item.coverImgUrl" @click="$router.push('/playlists/' + item.id)" />
              <span class="play-count"><i class="el-icon-caret-right"></i>{{
              item.playCount > 100000
              ? (item.playCount / 10000).toFixed(0) + "万"
              : item.playCount
              
              
              
              
              
              
              }}</span>
              <div class="play" @click="getSongUrlAndList(item)">
                <i class="iconfont icon-bofangzanting-"></i>
              </div>
            </div>
            <p>{{ item.name }}</p>
            <span class="create-time">{{ item.createTime | formatTime }}</span>
          </div>
        </div>
        <!-- 卡片形式展示 -->

        <!-- 列表形式展示 -->
        <div v-if="modo == 'list'" class="list-modo">
          <div class="albums-item" v-for="item in albums" :key="item.id" @click="$router.push('/playlists/' + item.id)">
            <div class="img">
              <img :src="item.coverImgUrl" />
            </div>
            <div class="info">
              <p>{{ item.name }}</p>
              <span class="albums-artists">歌曲：{{ item.trackCount }} 首</span>
              <span class="playlist-info"><i>by</i>{{ item.creator.nickname }}</span>
              <span class="playlist-info add"><i class="el-icon-folder-add"></i> {{ item.subscribedCount }}</span>
              <span class="playlist-info video"><i class="el-icon-video-play"></i> {{ item.playCount }}</span>
            </div>
          </div>
        </div>
        <!-- 列表形式展示 -->
      </el-tab-pane>
      <!-- 用户收藏歌单展示区域-------------------------------------------------------------------------- -->
      <el-tab-pane label="收藏的歌单" name="second">
        <!-- 歌曲形式展示 -->
        <div v-show="modo == 'detail'" class="detail-modo">
          <!-- 用户收藏的歌单展示区域 -->
          <div class="songs-info-box" v-for="item in subPlayLists" :key="item.id">
            <!-- 左侧大图片 -->
            <div class="songs-img">
              <div>
                <img :src="item.coverImgUrl" />
                <span class="create-time">{{ item.createTime | formatTime }}</span>
              </div>
            </div>
            <!-- 右侧歌曲展示区域 -->
            <div class="songs-detail">
              <!-- title区域 -->
              <div class="songs-detail-title">
                <h1 @click="$router.push('/playlists/' + item.id)">{{ item.name }}</h1>
                <span class="el-icon-video-play"></span>
                <span class="shu">|</span>
                <span class="el-icon-folder-add"></span>
              </div>
              <div class="songs-table">
                <!-- 展示歌曲表格区域 -->
                <el-table :data="item.songs" style="width: 100%" lazy size="mini" :show-header="false"
                  @row-dblclick="(row, col, e) => getSongInfo(row, col, e, item.id)">
                  <el-table-column type="index" width="50" align="center"></el-table-column>
                  <el-table-column width="80">
                    <template slot-scope="{ row }">
                      <div class="control">
                        <!--   -->
                        <span class="iconfont icon-xihuan" @click="addmyLove(row)"></span>
                        <span class="iconfont icon-xiazai" @click="download(row)"></span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column width="width" show-overflow-tooltip>
                    <template slot-scope="{ row }">
                      <div class="title-tags">
                        <span class="song-title">{{ row.name
                        }}<i v-if="row.alia.length > 0">({{ row.alia[0] }})</i></span>
                        <div class="tags">
                          <el-tag v-if="row.fee == 1" effect="plain" size="mini" class="vip-tag">VIP</el-tag>
                          <el-tag v-if="row.sq" effect="plain" size="mini" class="sq-tag">SQ</el-tag>
                          <el-tag v-if="row.mv" effect="plain" size="mini" class="sq-tag"
                            @click="$router.push('/mv/' + row.mv)">MV<i class="el-icon-caret-right"></i></el-tag>
                          <i v-if="row.pc" class="el-icon-cloudy"></i>
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="dt" width="80"></el-table-column>
                </el-table>
                <!-- 显示全部歌曲 -->
                <div v-if="item.songs && item.songs.length == 10" class="show-all">
                  <span @click="$router.push('/playlists/' + item.id)">查看全部{{ item.trackCount }}首 ></span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 歌曲形式展示 -->

        <!-- 卡片形式展示 -->
        <div v-if="modo == 'card'" class="card-modo">
          <div class="card-item" v-for="item in subPlayLists" :key="item.id">
            <div class="album-img">
              <img :src="item.coverImgUrl" @click="$router.push('/playlists/' + item.id)" />
              <span class="play-count"><i class="el-icon-caret-right"></i>{{
              item.playCount > 100000
              ? (item.playCount / 10000).toFixed(0) + "万"
              : item.playCount
              }}</span>
              <div class="play" @click="getSongUrlAndList(item)">
                <i class="iconfont icon-bofangzanting-"></i>
              </div>
            </div>
            <p>{{ item.name }}</p>
            <span class="create-time">{{ item.createTime | formatTime }}</span>
          </div>
        </div>
        <!-- 卡片形式展示 -->

        <!-- 列表形式展示 -->
        <div v-if="modo == 'list'" class="list-modo">
          <div class="albums-item" v-for="item in subPlayLists" :key="item.id"
            @click="$router.push('/playlists/' + item.id)">
            <div class="img">
              <img :src="item.coverImgUrl" />
            </div>
            <div class="info">
              <p>{{ item.name }}</p>
              <span class="albums-artists">歌曲：{{ item.trackCount }} 首</span>
              <span class="playlist-info"><i>by</i>{{ item.creator.nickname }}</span>
              <span class="playlist-info add"><i class="el-icon-folder-add"></i>{{
              item.subscribedCount > 10000
              ? (item.subscribedCount / 10000).toFixed(0) + "万"
              : item.subscribedCount
              }}</span>
              <span class="playlist-info video"><i class="el-icon-video-play"></i>{{
              item.playCount > 100000
              ? (item.playCount / 10000).toFixed(0) + "万"
              : item.playCount
              }}</span>
            </div>
          </div>
        </div>
        <!-- 列表形式展示 -->
      </el-tab-pane>
      <el-tab-pane label="收藏的博客" name="third">
        <div style="width: 100%; height: 200px; text-align: center; margin-top: 200px">
          未开发！
        </div>
      </el-tab-pane>
      <el-tab-pane label="创建的音乐专栏" name="fourth">
        <div style="width: 100%; height: 200px; text-align: center; margin-top: 200px">
          未开发！
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-backtop :bottom="150" :right="150">
      <div>
        <span class="iconfont icon-huidaodingbu" style="fontSize: 26px; color: rgb(96, 56, 207)"></span>
      </div>
    </el-backtop>
  </div>
</template>

<script>
import axios from '@/request/request'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      // 歌手信息
      artistInfo: {},
      // 歌手描述
      artistDesc: {},
      // tabs栏绑定参数
      activeName: 'first',
      // 歌手热么50首
      hotSongs: [],
      // 前10首
      hotSongs10: [],
      // 用于获取专辑参数
      limit: 10,
      offset: 0,
      // 用户创建的歌单
      albums: [],
      // 用户收藏的歌单
      subPlayLists: [],
      flag: false,
      // 相似歌手
      likeArtists: [],
      // 控制显示模式参数
      modo: 'card'
    }
  },
  watch: {
    $route(val) {
      Object.assign(this.$data, this.$options.data.call(this))
      const id = val.params.id
      this.getArtistInfo(id)
      this.getArtistHotSong(id)
      this.getArtistAlbums(id)
    }
  },
  computed: {
    ...mapState('user', ['userInfo'])
  },
  created() {
    const id = this.$route.params.id
    this.getArtistInfo(id)
    this.getArtistHotSong(id)
    this.getArtistAlbums(id)
  },
  mounted() {
    window.addEventListener('scroll', this.windowScroll, true)
  },
  methods: {
    // 获取歌手信息
    async getArtistInfo(id) {
      const { data: res } = await axios.get(`/user/detail?uid=${id}`)
      // console.log(res);
      if (res.code == 200) {
        this.artistInfo = res
      }
    },
    // 获取用户排行榜数据
    async getArtistHotSong(id) {
      const { data: res } = await axios.get(`/user/record?uid=${id}&type=1`)
      if (res.code == 200) {
        this.hotSongs = res.weekData
        this.hotSongs10 = res.weekData.slice(0, 10)
      }
    },
    // 获取用户歌单
    async getArtistAlbums(id, flag) {
      if (flag) this.flag = false
      const { data: res } = await axios.get(`/user/playlist?uid=${id}&limit=${this.limit}&offset=${this.offset}`)
      if (res.code == 200) {
        res.playlist.forEach(async item => {
          item.songs = await this.getAlbumSongs(item.id)
        })
        this.albums.push(...res.playlist.filter(item => item.creator.userId == id))
        this.subPlayLists.push(...res.playlist.filter(item => item.creator.userId != id))
        this.$nextTick(() => {
          this.flag = true
        })
      }
    },
    // 获取专辑前10首歌曲
    async getAlbumSongs(id) {
      const { data: res } = await axios.get(`/playlist/track/all?id=${id}&limit=10&offset=0`)
      // console.log(res);
      if (res.code == 200) {
        res.songs.forEach(item => {
          item.dt = this.format(item.dt)
        })
        return res.songs
      }
    },
    // window滚动事件处理函数
    windowScroll() {
      if (!this.flag || this.activeName != 'first' || this.offset * this.limit >= this.artistInfo.albumSize) return
      const html = document.documentElement
      if (html.scrollHeight - html.scrollTop <= html.clientHeight + 100) {
        const flag = true
        this.offset += 5
        this.getArtistAlbums(this.artistInfo.id, flag)
      }
    },
    // 格式化歌曲毫秒数
    format(dt) {
      let m = parseInt(dt / 1000 / 60)
      let s = ((dt / 1000) % 60).toFixed(0)
      if (m < 10) {
        m = '0' + m
      }
      if (s < 10) {
        s = '0' + s
      }
      return m + ':' + s
    },
    // 查看全部50首
    checkAllSongs() {
      this.hotSongs10 = this.hotSongs
    },
    // 表格行双击事件，获取音乐播放地址
    getSongInfo(row, col, e, id) {
      if (row.song) {
        this.$store.dispatch('audio/getSongUrl', row.song)
        const hotSong100 = []
        this.hotSongs.forEach(item => {
          hotSong100.push(item.song)
        })
        this.$store.commit('audio/updateNowPlayList', hotSong100)
      } else {
        this.$store.dispatch('audio/getSongUrl', row)
        this.$store.dispatch('audio/getPlaySongs', id)
      }
    },
    // tab栏点击触发函数
    handleClick() {
      if (this.activeName == 'second') {
      } else if (this.activeName == 'fourth') {
      }
    },
    // 添加到我的喜欢音乐
    async addmyLove(row) {
      const { data: res } = await axios.post(`/like?id=${row.id}`)
      if (res.code == 200) {
        this.$message.success('喜欢成功')
      }
    },
    // 点击获取下载链接
    async download(row) {
      const { data: res } = await axios.get(`/song/download/url?id=${row.id}`)
      if (res.code == 200) {
        this.$download(res)
      }
    },
    // 点击切换卡片显示模式
    changeCardModo() {
      this.modo = 'card'
      if (this.albums.length < 10) {
        this.offset += 5
        this.getArtistAlbums(this.artistInfo.id, this.modo)
      }
    },
    // 点击切换列表显示模式
    changeListModo() {
      this.modo = 'list'
      if (this.albums.length < 10) {
        this.offset += 5
        this.getArtistAlbums(this.artistInfo.id, this.modo)
      }
    },
    // 卡片模式播放按钮点击，播放该歌单第一首歌曲并获取该歌单所有歌曲
    getSongUrlAndList(item) {
      this.$store.dispatch('audio/getSongUrl', item.songs[0])
      this.$store.dispatch('audio/getPlaySongs', item.id)
    }
  }
}
</script>

<style lang="less" scoped>
@media screen and (max-width: 1500px) {
  .userprofiles-container {
    width: 70% !important;
  }
}

@media screen and (max-width: 1000px) {
  .userprofiles-container {
    width: 100% !important;
  }
}

/deep/ .el-table {
  background-color: transparent;
}

/deep/ .el-table__expanded-cell {
  background-color: transparent;

}

/deep/ .el-table tr {
  background-color: transparent;
}

/deep/ .el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-bottom: none;
}

/deep/ .el-table th.el-table__cell {
  background-color: transparent;
}

.userprofiles-container {
  box-sizing: border-box;
  padding: 10px;
  width: 50%;
  margin: 0 auto;
  margin-top: 3.7%;
  cursor: default;
  background-color: rgba(#fff, 0.75);
  border-radius: 10px;

  .userprofiles-bgc {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
  }

  // 用户信息
  .songs-box {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 230px;
    // background-color: pink;
    padding: 10px 0;
    margin-bottom: 20px;
    text-align: start;
    cursor: default;

    // 控制显示模式按钮盒子
    .change-modo-btns {
      z-index: 500;
      position: absolute;
      right: 15px;
      bottom: -55px;
      border-radius: 3px;
      height: 24px;
      overflow: hidden;
      background-color: rgb(227, 227, 227);

      span {
        display: inline-block;
        height: 100%;
        padding: 0 8px;
        line-height: 24px;
        color: rgb(156, 156, 156);

        &:hover {
          background-color: rgb(192, 192, 192);
        }

        &.select {
          background-color: rgb(192, 192, 192);
        }
      }

      .icon-shitu-liebiao {
        border-left: 1px solid rgb(255, 255, 255);
        border-right: 1px solid rgb(255, 255, 255);
      }
    }

    .songs-img {
      width: 230px;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;

      // background-color: rgb(146, 109, 109);
      img {
        width: 100%;
        height: 100%;
      }
    }

    .songs-content {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 73%;
      height: 80%;

      // background-color: rgb(206, 52, 52);
      .title {
        display: flex;
        flex-direction: column;

        .songs-title {
          display: flex;
          align-items: center;

          h1 {
            margin: 0;
            font-size: 25px;
          }
        }

        .user {
          width: 100%;
          display: flex;
          align-items: center;
          font-size: 14px;
          margin-top: 10px;
          padding-bottom: 10px;
          cursor: default;
          border-bottom: 1px solid rgb(210, 210, 210);

          .vip-info {
            display: flex;
            // flex-wrap: wrap;
            align-items: center;
            white-space: nowrap;
            overflow: hidden;
            // justify-content: space-between;
            width: 50%;
            margin: 0;
            padding-right: 15px;
            color: #444444;

            .cvip {
              background: url('~@/assets/images/cvip.jpg') no-repeat;
              background-size: contain;
              width: 78px;
              height: 22px;
              overflow: hidden;
              border-radius: 11px;
              margin-right: 3px;
            }

            .desc {
              display: flex;
              align-items: center;
              height: 22px;
              background-color: rgba(234, 71, 71, 0.2);
              border-radius: 11px;
              padding-right: 10px;
              margin-right: 3px;

              img {
                width: 22px;
                height: 22px;
                margin-right: 3px;
                overflow: hidden;
                border-radius: 50%;
              }

              span {
                color: rgb(247, 98, 98);
                font-size: 12px;
              }
            }

            .level {
              width: 40px;
              height: 20px;
              border-radius: 10px;
              text-align: center;
              line-height: 20px;
              background-color: rgb(220, 220, 220);
              font-size: 14px;
              margin-right: 3px;
            }

            .el-icon-male {
              color: rgb(40, 174, 227);
              font-weight: 700;
              font-size: 18px;
              border-radius: 50%;
              padding: 1px;
              background-color: rgba(96, 189, 255, 0.5);
              margin-right: 3px;
            }

            .el-icon-female {
              color: hotpink;
              font-weight: 700;
              font-size: 18px;
              border-radius: 50%;
              background-color: #fff;
              padding: 1px;
              background-color: rgba(249, 90, 196, 0.6);
              margin-right: 3px;
            }
          }

          .btn-songs {
            display: flex;
            width: 50%;
            justify-content: space-between;
            // padding-right: 40px;
            cursor: default;
            white-space: nowrap;
            text-overflow: ellipsis;

            .star {
              display: flex;
              justify-content: space-between;
              align-items: center;
              height: 34px;
              border: 1px solid rgb(192, 192, 192);
              padding: 0 15px;
              border-radius: 17px;
              font-size: 14px;
              transition: all 0.3s;

              &:hover {
                background-color: #eaeaea;
              }

              .el-icon-check {
                font-size: 20px;
              }

              .el-icon-plus {
                font-size: 20px;
                color: rgb(233, 38, 38);
              }
            }

            .down {
              display: flex;
              justify-content: space-between;
              align-items: center;
              height: 34px;
              border-radius: 17px;
              padding: 0 15px;
              font-size: 14px;
              border: 1px solid rgb(192, 192, 192);
              transition: all 0.3s;

              &:hover {
                background-color: #eaeaea;
              }

              .el-icon-mic,
              .el-icon-message {
                font-size: 18px;
                // font-weight: 700;
              }
            }

            .update {
              transform: translateX(150%);

              .el-icon-edit {
                margin-right: 3px;
              }
            }
          }
        }
      }

      .songs-synopsis {
        display: flex;
        cursor: default;

        p {
          margin: 4px 0;
          margin-right: 15px;
          font-size: 14px;
        }
      }

      .user-desc {
        margin: 0;
        font-size: 14px;
      }
    }
  }

  // 歌曲形式展示区域
  .detail-modo {
    .songs-info-box {
      display: flex;
      justify-content: space-between;
      width: 100%;
      margin-bottom: 50px;

      .songs-img {
        width: 20%;

        img {
          position: relative;
          z-index: 20;
          width: 200px;
          height: 200px;
          border-radius: 6px;
          overflow: hidden;
        }

        div {
          position: relative;
          width: 200px;
          height: 200px;

          .icon-zhuanji1 {
            z-index: 10;
            position: absolute;
            top: 50%;
            right: -90px;
            transform: translateY(-50%);
            font-size: 150px;
          }

          .create-time {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: -20px;
            color: rgb(159, 158, 158);
            font-size: 15px;
          }
        }
      }

      .songs-detail {
        width: 70%;

        .songs-detail-title {
          display: flex;
          // justify-content: space-between;
          align-items: center;
          width: 100%;
          margin-bottom: 10px;

          h1 {
            margin: 0;
            font-size: 20px;
            font-weight: 550;
            margin-right: 20px;
            color: rgb(57, 57, 57);
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }

          .shu {
            color: rgb(200, 200, 200);
            font-size: 14px;
            margin: 0 10px;
          }

          .el-icon-video-play,
          .el-icon-folder-add {
            font-size: 22px;
            line-height: 24px;
            color: rgb(115, 115, 115);
          }
        }

        .songs-table {

          // 表格区域样式
          .control {
            // display: flex;
            // justify-content: space-between;
            // width: 80%;

            .icon-xiazai {
              font-size: 20px;
              margin-left: 5px;

              &:hover {
                font-weight: 700;
              }
            }

            .icon-xihuan {
              &:hover {
                font-weight: 700;
              }
            }
          }

          .title-tags {
            display: flex;

            .tags {
              display: flex;
              align-items: center;

              .vip-tag {
                color: #d83b55;
                border: 1px solid #d83b55;
                margin-left: 3px;
              }

              .sq-tag {
                color: #962ed6;
                border: 1px solid #962ed6;
                margin-left: 3px;
              }

              /deep/ .el-icon-cloudy {
                font-size: 20px;
                // transform: translateY(4px);
                margin-left: 3px;
              }
            }

            .song-title {
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;

              i {
                color: #9e9d9d;
                font-style: normal;
              }
            }
          }

          .show-all {
            height: 36px;
            line-height: 36px;
            font-size: 13px;
            padding-right: 37px;
            color: rgb(181, 181, 181);
            text-align: right;
            background-color: rgb(246, 246, 246);

            &:hover {
              color: rgb(140, 140, 140);
            }
          }
        }
      }
    }

    .play-count {
      color: rgb(111, 111, 111);
    }
  }

  // 卡片形式展示区域
  .card-modo {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;

    .card-item {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      width: 22%;
      height: 275px;
      margin-bottom: 20px;

      .album-img {
        position: relative;
        width: 100%;
        height: 200px;

        &:hover .play {
          opacity: 1;
        }

        img {
          z-index: 20;
          position: relative;
          width: 100%;
          height: 200px;
          overflow: hidden;
          border-radius: 8px;
          background-color: #fff;
        }

        .play-count {
          display: flex;
          align-items: center;
          z-index: 30;
          position: absolute;
          top: 7px;
          right: 7px;
          font-size: 13px;
          color: #fff;
          font-weight: 700;

          .el-icon-caret-right {
            font-size: 16px;
          }
        }

        .play {
          opacity: 0;
          transition: all 0.8s;
          z-index: 30;
          position: absolute;
          bottom: 20px;
          right: 20px;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background-color: rgba(255, 255, 255, 0.9);
          text-align: center;
          line-height: 40px;

          .icon-bofangzanting- {
            color: rgb(122, 21, 217);
            font-size: 30px;
          }
        }
      }

      p {
        height: 40px;
        text-align: start;
        font-size: 15px;
        margin: 10px 0;
        overflow: hidden;
        text-overflow: ellipsis;
        /* 3.设置盒子属性为-webkit-box  必须的 */
        display: -webkit-box;
        /* 4.-webkit-line-clamp 设置为2，表示超出2行的部分显示省略号，如果设置为3，那么就是超出3行部分显示省略号 */
        -webkit-line-clamp: 2;
        /* 5.字面意思：单词破坏：破坏英文单词的整体性，在英文单词还没有在一行完全展示时就换行  即一个单词可能会被分成两行展示 */
        word-break: break-all;
        /* 6.盒子实现多行显示的必要条件，文字是垂直展示，即文字是多行展示的情况下使用 */
        -webkit-box-orient: vertical;

        span {
          color: rgb(185, 185, 185);
        }
      }

      .create-time {
        font-size: 15px;
        color: rgb(185, 185, 185);
      }
    }
  }

  // 列表模式显示区域
  .list-modo {
    width: 100%;

    .albums-item {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      width: 100%;
      height: 80px;
      padding: 10px 20px;
      text-align: start;

      &:hover {
        background-color: rgb(243, 243, 243);
      }

      .img {
        position: relative;
        margin-right: 30px;
        width: 60px;
        height: 60px;

        img {
          width: 60px;
          height: 60px;
          border-radius: 5px;
          z-index: 10;
        }

        .icon-zhuanji1 {
          position: absolute;
          top: 50%;
          right: -30px;
          transform: translateY(-50%);
          font-size: 50px;
          z-index: 1;
          color: rgb(0, 0, 0);
        }
      }

      .info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 1;
        // justify-content: space-between;

        p {
          width: 40%;
          color: rgb(32, 32, 32);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;

          span {
            color: rgb(191, 191, 191);
          }
        }

        .albums-artists {
          width: 15%;
          font-size: 12px;
          color: rgb(163, 163, 163);
        }

        .playlist-info {
          display: flex;
          align-items: center;
          width: 20%;
          font-size: 12px;
          color: rgb(163, 163, 163);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;

          i {
            font-style: normal;
            margin-right: 5px;
          }

          .el-icon-folder-add,
          .el-icon-video-play {
            font-size: 20px;
          }
        }

        .add,
        .video {
          width: 10%;
        }
      }
    }
  }

  // 歌手描述样式
  .artist-desc {
    text-align: start;
    margin-bottom: 50px;

    h3 {
      font-size: 16px;
    }

    p {
      text-indent: 2em;
      font-size: 15px;
      line-height: 35px;
      color: rgb(96, 96, 96);
    }
  }

  // 相似歌手区域描述
  .like-artists {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;

    .artists-item {
      width: 18%;
      height: 200px;
      margin-bottom: 20px;
      // background-color: pink;
      text-align: start;

      img {
        width: 100%;
        height: 85%;
        border-radius: 6px;
        overflow: hidden;
      }

      span {
        font-size: 15px;
      }
    }
  }

  /deep/ .el-tabs__item:hover {
    color: #962ed6;
  }

  /deep/ .el-tabs__item.is-active {
    color: #962ed6;
    font-size: 20px;
    font-weight: 700;
  }

  /deep/ .el-tabs__active-bar {
    background-color: #962ed6;
    height: 4px;
  }

  /deep/ .el-tabs__nav-wrap::after {
    height: 0;
  }

  /deep/ .el-tag--mini {
    height: 16px;
    line-height: 16px;
    padding: 0 2px;
  }

  /deep/ .el-table--mini {
    font-size: 14px;
  }
}
</style>
